Designing with Bootstrap

Formbird uses 'Bootstrap' content framework to arrange components on the form. Bootstrap is a 'responsive' framework meaning it will adapt the screen display to various screen sizes. This makes it ideal for using on multiple device types. The components array is read from top to bottom and organised to fit on the screen depending on size.

The easiest way to demonstrate how the layout works is by watching the short video above.

     "components": [
        {
            "componentName": "sc-static-value",
            "name": "appTags",
            "value": [
                "myApplication",
                "myType"
            ],
            "visible": false
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        }
    ],

The first component in this components array is set "visible":false, so is excluded entirely from the display and the bootstrap grid.

As can be seen in the video - at full screen width, the components are laid out 6 wide. When the screen is narrowed (simulating a mobile device), the component are first displayed 4 across, then 3, then 2 across the page.

Components have two possible settings to define their width - "fullWidth":true or "fullWidth":false - note that true/false are NOT defined with quotes, they are boolean fields. If not defined, the component uses the default setting which is "fullWidth":false. If "fullWidth":true, the component takes the entire width of the screen and the next component in the array is started on the next 'line'.

    "components": [
        {
            "componentName": "sc-static-value",
            "name": "appTags",
            "value": [
                "myApplication",
                "myType"
            ],
            "visible": false
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        },
        {
            "componentName": "sc-static-html",
            "html": " ",
            "fullWidth": true
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "fullWidth":true,
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        }
    ],

'Line Breaks' can be forced by including an 'sc-static-html' component.

 "components": [
        {
            "componentName": "sc-static-value",
            "name": "appTags",
            "value": [
                "myApplication",
                "myType"
            ],
            "visible": false
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        },
        {
            "componentName": "sc-static-html",
            "fullWidth":true,
            "html": " "
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Submitted",
            "name": "dateSubmitted"
        },
        {
            "componentName": "sc-text-box",
            "label": "Reproducibility",
            "name": "reproducibility"
        },
        {
            "componentName": "sc-drop-down",
            "label": "Severity",
            "name": "issueSeverity",
            "dropDownList": [
                "Trivial",
                "Minor",
                "Major",
                "Critical"
            ]
        }
    ],

Notes: - the 'sc-static-html' component set to "fullWidth":true. - the "label":" " - a space must be included in the label. - "sc-static-html" field doesn't have a label in this instance - it is not required to write any information to a document.

Components such as the mapping and grids perform best at "fullWidth":true